<template>
  <div id="graphic-content">
    <template v-if="JSON.stringify(detail) === '{}'">
      <div class="img-box">
        <img src="@/assets/EmptyState/noContent.png">
      </div>
    </template>
    <template v-else>
    <div class="content-box-card" v-loading="loading">
      <div class="content-box-card-title">
        <div class="left"><label>{{ detail.name }}</label><span class="runing" v-if="detail.status === 1">正常运行</span><span class="suspend" v-else>已暂停</span></div>
        <div class="right"><span>更新方式：{{ detail.updateWayLabel }}更新</span><span v-if="rQuery.labelId">创建方式：{{ detail.createWayLabel || '-' }}</span><span>创建人：{{ detail.createByName ? detail.createByName : '-' }}</span></div>
      </div>
      <div class="content-box-card-info">
        <div class="text-info">{{ detail.remark || '-' }}</div>
        <div class="text-info font14">通过{{ detail.createWayLabel }}规则，将客户划分为{{ detail.tierNameList.length }}层，分别为：<span v-for="it in detail.tierNameList">{{it}}</span>...
          <router-link :to="{path:'/LabelGroup/labelAdd', query: {type: detail.createWay == 1 ? 'program' : 'diy', labelId: detail.id, createWay: detail.createWay}}" v-if="rQuery.labelId || rQuery.type === 'label'">查看详情>></router-link>
          <router-link :to="{path:'/LabelGroup/labelAdd', query: {type: 'group', groupId: detail.id, createWay: detail.createWay}}" v-else>查看详情>></router-link>
          <div class="button-list">
            <el-button size="small" @click="() => onUpData()" :loading="upDataLoading" v-if="detail.createWay === 1">更新</el-button>
<!--            <el-button size="small">变更记录</el-button>-->
            <router-link :to="{path:'/LabelGroup/labelChangeRecord', query: {groupId: detail.id, pageTitle: 1}}" v-if="rQuery.groupId"><el-button size="small">变更记录</el-button></router-link>
            <router-link :to="{path:'/LabelGroup/labelChangeRecord', query: {labelId: detail.id, pageTitle: 2}}" v-else><el-button size="small">变更记录</el-button></router-link>
            <el-button size="small" @click="() => onSelectEmployeeKpiExport()" :loading="exportLoading">导出</el-button>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box-card" v-loading="loadingEcharts">
      <div class="content-box-card-title"><div class="left"><label>{{ rQuery.labelId ? '标签' : '分群' }}人数分布</label></div></div>
      <template v-if="echartsPieColumnar.dataList.length <= 0">
        <div class="img-box">
          <img src="@/assets/EmptyState/noContent.png">
        </div>
      </template>
      <template v-else>
        <el-tabs class="distribution" v-model="tabsActiveName" @tab-click="changeTabs" tabPosition="left" >
          <el-tab-pane label="饼状图" name="pie" :lazy="true">
            <div class="echarts-box" v-if="tabsActiveName === 'pie'">
              <div class="echarts-box-info">
                <div><span><label>{{ echartsPieColumnar.totalPeopleNum }}</label>人</span>（在全部客户中占比：<span>{{ echartsPieColumnar.totalPeopleNumRate }}%</span>）</div>
                <div class="font14">开始时间 {{ echartsPieColumnar.createdTime }}，计算完成时间 {{ echartsPieColumnar.updatedTime || '-' }}</div>
              </div>
              <echarts-pie v-loading="echartsPieColumnar.loading" documentId="money" :config="echartsPieColumnar.config" :dataList="echartsPieColumnar.dataList"></echarts-pie>
            </div>
          </el-tab-pane>
          <el-tab-pane label="柱状图" name="columnar" :lazy="true">
            <div class="echarts-box" v-if="tabsActiveName === 'columnar'">
              <div class="echarts-box-info">
                <div><span><label>{{ echartsPieColumnar.totalPeopleNum }}</label>人</span>（在全部客户中占比：<span>{{ echartsPieColumnar.totalPeopleNumRate }}%</span>）</div>
                <div class="font14">开始时间 {{ echartsPieColumnar.createdTime }}，计算完成时间 {{ echartsPieColumnar.updatedTime || '-' }}</div>
              </div>
              <div id="echarts-columnar">
                <echarts-columnar v-loading="echartsPieColumnar.loading" documentId="echarts-columnar" :config="echartsPieColumnar.config" :dataList="echartsPieColumnar.dataList"></echarts-columnar>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </template>
    </div>
   </template>
  </div>
</template>

<script>
import EchartsPie from './EchartsPie.vue'
import EchartsColumnar from './EchartsColumnar.vue'
import common from '../mixins/common'
export default {
  mixins: [common],
  name: 'GraphicContent',
  components: {
    EchartsPie, // 饼形图
    EchartsColumnar // 柱形图
  },
  props: {
    config: {
      type: Object,
      default: () => {
      }
    },
    dataList: {
      type: Object,
      default: () => {
      }
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      rQuery: {},
      upDataLoading: false,
      exportLoading: false,
      detail: {},
      tabsActiveName: 'pie',
      echartsPieColumnar: { // 客户购买频次分布
        loading: false,
        title: '客户购买频次分布',
        type: 'frequency',
        orgCode: '', // 公司部门

        createdTime: "2222-07-21 16:16:16", // 创建时间
        name: "人群价值", // 标签名称
        nodes: ["消费大牛"],
        totalMoneyList: ["8"], // 人数占比List
        totalMoneyRateList: ["88"], // 人数占比List
        totalPeopleNum: 8, // 总人数
        totalPeopleNumRate: "0", // 总人数再全部客户中占比
        updatedTime: "2222-07-21 16:16:16", // 更新时间
        loadingEcharts: false,
        config: {
          total: 1,
          colorArr: ['#4168e7', '#14d8cb', '#1ccf79', '#ffd83b', '#f65570', '#9850fc', '#73c0de', '#5470c6', '#91cc75', '#fac858', '#ee6666'],
          dataList: ['2次以下（不含两次）', '2-3次', '4-5次', '5次以上（不含5次）']
        },
        // dataList: [ { value: 12, name: '360元以上' }, { value: 35, name: '315-360元' }, { value: 50, name: '270-315元' } ]
        dataList: []
      }
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        const rQuery = route.query
        this.rQuery = rQuery
        if (rQuery.labelId || rQuery.groupId) {
          this.getTagInfo() // 信息查询接口
        }
        // console.log(this.rQuery)
      },
      immediate: true
      // deep: true
    },
    dataList: {
      deep: true,
      handler (newVal, oldVal) {
        this.handlerClientData()
      }
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.handlerClientData()
    })
  },
  created () {
    const rQuery = this.$route.query
    this.rQuery = rQuery
    if (rQuery.tabsActiveName) {
      this.tabsActiveName = rQuery.tabsActiveName
    }
  },
  methods: {
    // 信息查询接口
    getTagInfo () {
      const rQuery = this.$route.query
      let params = { id: 1 }, methodFun
      if (rQuery.labelId) { // 标签信息查询接口
        params = { id: rQuery.labelId }
        methodFun = this.$api.tagInfo
      }
      if (rQuery.groupId) { // 人群信息查询接口
        params = { id: rQuery.groupId } // 人群信息查询接口
        methodFun = this.$api.classifyGroupInfo
      }
      methodFun(params).then((res) => {
        if (res.code === 0) {
          this.detail = res.data
          this.getPeopleDivide () // 查询标签人数分布
        }
      }).catch((err) => {
        // this.loading = false
        console.log(err)
      })
    },
    // 查询人数分布
    getPeopleDivide () {
      this.loadingEcharts = true
      const rQuery = this.$route.query
      let params = { id: 1 }, methodFun
      if (rQuery.labelId) { // 标签信息查询接口
        params = { id: rQuery.labelId }
        methodFun = this.$api.tagSelectTagPeopleDivide
      }
      if (rQuery.groupId) { // 人群信息查询接口
        params = { id: rQuery.groupId } // 人群信息查询接口
        methodFun = this.$api.classifyGroupSelectGroupPeopleDivide
      }
      methodFun(params).then((res) => {
        this.loadingEcharts = false
        if (res.code === 0 && res.data.totalPeopleNumRate) {
          const dataList = []
          const nodes = res.data.nodes
          const totalMoneyRateList = res.data.totalMoneyRateList
          const totalMoneyList = res.data.totalMoneyList
          if (!totalMoneyList) {return}
          totalMoneyList.forEach((item, index) => {
            // dataList.push({ value: `${item}`, name: `${nodes[index]}`, rate: `${totalMoneyRateList[index]}` })
            dataList.push({ value: `${totalMoneyRateList[index]}`, name: `${nodes[index]}`, totalMoney: `${totalMoneyList[index]}` })
            // dataList.push({ value: item, name: `${nodes[index]}-${totalMoneyRateList[index]}%`})
          })
          this.echartsPieColumnar = Object.assign({}, this.echartsPieColumnar, res.data)
          this.echartsPieColumnar.dataList = dataList
          // console.log(this.echartsPieColumnar)
        } else {
          this.echartsPieColumnar.dataList = []
        }
      }).catch((err) => {
        this.loadingEcharts = false
        this.echartsPieColumnar.dataList = []
        console.log(err)
      })
    },
    // 导出指定标签的客户数据
    onSelectEmployeeKpiExport (type) {
      this.exportLoading = true
      let id, methodFun
      if (this.rQuery.labelId) {
        id = this.rQuery.labelId
        methodFun = this.$api.tagSelectEmployeeKpiExport
      } else {
        id = this.rQuery.groupId
        methodFun = this.$api.classifyGroupSelectEmployeeKpiExport
      }
      const params = { id }
      methodFun(params).then((res) => {
        this.exportLoading = false
        if (res.code === 0) {
          this.$message.success('操作成功！')
          this.downloadlink(res.data)
        }
      }).catch((err) => {
        this.exportLoading = false
        console.log(err)
      })
    },
    changeTabs (tab, event) {
      // console.log(tab, event)
      // this.tabsActiveName = tab.name
      // console.log(this.tabsActiveName)
      // this.$router.push({ path: '/LabelGroup/labelManage', query: { tabsActiveName: tab.name }})
      // this.$router.push({ path: '/LabelGroup/labelManage', query: Object.assign(this.$route.query, { tabsActiveName: tab.name }) })
      // this.$router.push({path: '/LabelGroup/labelManage',query:{...this.$route.query,tabsActiveName: tab.name}})
      this.$router.push({query: {...this.$route.query,tabsActiveName: tab.name}})

    },
    handlerClientData () {},
    onUpData() {
      this.upDataLoading = true
      const id = this.$route.query.labelId
      const params = { id }
      this.$api.tagUpdateTagUserRelation(params).then((res) => {
        this.upDataLoading = false
        if (res.code === 0) {
          this.$message.success('操作成功！')
        }
      }).catch((err) => {
        this.upDataLoading = false
        console.log(err)
      })
    },
  }
}
</script>
<style scoped lang="scss">
.text-info:after {
  clear: both;
  display: table;
  content: '';
}
//正常运行
.runing, .suspend{
  width: 88px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  text-align: center;
  border-radius: 6px;
  display: inline-block;
  margin: 0 3px;
  font-weight: 500;
}
.runing{
  color: #12AB62;
  background-color: rgba(18, 171, 98, 0.1);
}
//已暂停
.suspend{
  color: #F33F3F;
  background-color: rgba(243, 63, 63, 0.1);
}
#graphic-content{
  width: 100%;
  height: 100%;
  .img-box{
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    img{width: 25%}
  }
}
.content-box-card {
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 15px;
  .content-box-card-title {
    display: flex;
    margin-bottom: 10px;
    label{
      margin-right: 10px;
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .left, .right{flex: 1}
    .left {

    }
    .right {
      text-align: right;
      span{
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
        margin: 0 10px;
        display: inline-block;
      }
    }
  }
  .content-box-card-info{
    background-color: #F4F7FC;
    padding: 15px;
    border-radius: 5px;
    .text-info{
      line-height: 200%;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px dashed #c3c3c3;
      a{
        font-size: 14px;
        font-weight: 500;
        color: #4168E7;
        text-decoration:none;
        margin-left: 10px;
      }
      &:last-child{
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
        span{
          //margin: 0 5px;
        }
        span + span{
          &:before{
            content: '，';
          }
        }
      }
    }
    .button-list{
      display:inline-block;
      float: right;
      .el-button{
        width: 100px;
        height: 32px;
        background: #FFFFFF;
        border: 1px solid #4168E7;
        border-radius: 4px;

        font-size: 14px;
        font-weight: 400;
        color: #4168E7;
      }
      .el-button + a, a + .el-button{
        margin-left: 10px;
      }
    }
  }
}

.distribution.el-tabs{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      :deep(&:after){
        opacity: 0;
      }
    }
  }
  :deep(.el-tabs__nav-scroll){
    padding: 0;
  }
  :deep(.el-tabs__active-bar){
    opacity: 0;
  }
  :deep(.el-tabs__item){
    width: 100px;
    height: 32px;
    line-height:32px;
    text-align:center;
    background: #F4F7FC;
    border-radius: 4px;
    color:rgba(153, 153, 153, 1);
    border: 1px solid #ffffff;
    margin-bottom: 10px;
  }
  :deep(.is-active){
    font-weight: bold;
    color: rgba(65, 104, 231, 1)!important;
    border: 1px solid rgba(65, 104, 231, 1);
  }
  :deep(.el-tab-pane){
    width: 100%;
    .echarts-box{
      width: 100%;
    }
  }
}

.echarts-box{
  .echarts-box-info{
    width: 100%;
    line-height: 180%;
    background-color: rgba(244, 247, 252, 1);
    padding: 5px 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    color: rgba(153, 153, 153, 1);
    span{
      color: rgba(65, 104, 231, 1);
      label{
        font-size: 30px;
        font-weight: bold;
      }
    }
  }
  .echarts-columnar{
    width: 100%;
    .clientData{
      width: 100%;
    }
  }
}
.font14{
  font-size: 14px;
}
</style>
